\
<template>
  <div
    class="el-cascader el-cascader--medium"
    @click.stop="toggleMenu"
    v-clickoutside="handleClose"
  >
    <el-input
      ref="reference"
      v-model="selectedLabel"
      type="text"
      :placeholder="tagsLen ? '' : placeholder"
      :name="name"
      :id="id"
      :size="size"
      :autocomplete="autocomplete"
      :disabled="disabled"
      :readonly="true"
      :validate-event="false"
      :class="{ 'is-focus': visible }"
      @keydown.native.esc.stop.prevent="visible = false"
      @keydown.native.tab="visible = false"
      @mouseenter.native="inputHovering = true"
      @mouseleave.native="inputHovering = false"
      @click.native.stop="toggerVisible"
    >
      <template slot="prefix" v-if="$slots.prefix">
        <slot name="prefix"></slot>
      </template>
      <template slot="suffix">
        <i
          v-show="!showClose"
          :class="['el-icon-arrow-down', 'el-input__icon', visible && 'is-reverse']"
        ></i>
        <i
          v-if="showClose"
          class="el-input__icon el-icon-circle-close"
          @click="handleClearClick"
        ></i>
      </template>
    </el-input>

    <div class="el-cascader__tags cursor-pointer" v-if="tagsLen">
      <el-tag type="info" disable-transitions :closable="false">
        <span>{{ presentTags[0].label }}</span>
      </el-tag>
      <el-tag v-if="tagsLen > 1" type="info" disable-transitions :closable="false">
        <span>+{{ tagsLen - 1 }}</span>
      </el-tag>
    </div>

    <transition name="el-zoom-in-top">
      <div class="el-select-dropdown el-popper" x-placement="bottom-start" v-show="visible">
        <select-org-bank-and-type-panel
          ref="panel"
          @change="handleChange"
          :product-id="productId"
        ></select-org-bank-and-type-panel>
        <div x-arrow class="popper__arrow" style="left: 35px"></div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Clickoutside from 'element-ui/src/utils/clickoutside'
import SelectOrgBankAndTypePanel from '@/gov/components/select/selectOrgBankAndType/Panel'

export default {
  components: {
    SelectOrgBankAndTypePanel,
  },
  directives: { Clickoutside },
  props: {
    name: String,
    id: String,
    productId: {
      type: String,
      default: '',
    },
    value: {
      type: String,
      required: true,
    },
    autocomplete: {
      type: String,
      default: 'off',
    },
    size: String,
    disabled: Boolean,
    placeholder: {
      type: String,
      default() {
        return '请选择'
      },
    },
    clearable: Boolean,
    loading: Boolean,
    noDataText: {
      type: String,
      default: '暂无数据',
    },
  },
  data() {
    return {
      visible: false,
      selectedLabel: null,
      inputHovering: false,
      innerValue: '',
      inputInitialHeight: 0,
      presentTags: [],
    }
  },
  computed: {
    ...mapGetters(['user']),
    tagsLen() {
      return this.presentTags.length
    },
    showClose() {
      const hasValue = this.tagsLen > 0
      return this.clearable && !this.disabled && this.inputHovering && hasValue
    },
  },
  watch: {
    value: {
      handler: function (val) {
        if (this.innerValue !== val) {
          this.innerValue = val
        }
      },
      immediate: true,
    },
    visible(val) {
      if (!val && this.$refs.panel) {
        this.$refs.panel.resetQuery()
      }
    },
  },
  created() {},
  mounted() {
    const { reference } = this.$refs
    if (reference && reference.$el) {
      this.inputInitialHeight = reference.$el.offsetHeight || 40
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('input', this.innerValue)
      this.$emit('change', val)
      this.selectedLabel = ''

      if (val.type === 'all') {
        this.presentTags = val.value ? [{ label: '所有' }] : []
      } else {
        this.presentTags = val.types.map(it => ({
          label: it.enum_value,
        }))
        for (const bank of val.banks) {
          this.presentTags.push({
            label: bank.agency_name,
          })
        }
      }
    },
    handleClearClick(e) {
      e.stopPropagation()
      this.$emit('input', '')
      this.$emit('change', {})
      this.$emit('clear')
      this.clear()
      this.selectedLabel = ''
      this.presentTags = []
      this.visible = false
    },
    toggleMenu() {
      if (this.disabled) return
      this.visible = !this.visible
      if (this.visible) {
        this.$refs.reference.focus()
      }
    },
    toggerVisible() {
      this.visible = !this.visible
    },
    handleClose() {
      this.visible = false
    },
    clear() {
      if (this.$refs.panel) {
        this.$refs.panel.clear()
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
